<template>
    <div class="showBigImgContainer">
        <div class="imgListBox">
            <img v-for="(item, index) in imgList" :key="'showBigImg_imgListBox' + index"
                 :src="item" @click="isShowPreviewBox=true">
        </div>
        <transition name="fade">
            <div class="previewBox" v-show="isShowPreviewBox">
                <el-carousel indicator-position="none" :autoplay=false>
                    <el-carousel-item v-for="(item, index) in imgList" :key="'showBigImg_previewBox' + index">
                        <img :src="item">
                    </el-carousel-item>
                </el-carousel>
                <a class="closeBtn" @click="isShowPreviewBox=false">&times;</a>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        props: {
          imgList: {
              type: Array,
              default: () => {
                  return [
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                      require('../assets/img/avator.jpg'),
                  ]
              }
          }
        },
    	data(){
    		return {
                isShowPreviewBox: false
    		}
    	},
    	created(){
    	},
		methods: {
		}
    }
</script>

<style lang="less">
	@import '../style/mixin';

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    .showBigImgContainer {
        width: 100%;
        .imgListBox {
            width: 100%;
            overflow: hidden;
            img {
                width: 100px;
                margin: 10px 10px;
                cursor: pointer;
            }
        }
        .previewBox {
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 1000000;

            .closeBtn {
                color: #ffffff;
                font-size: 40px;
                cursor: pointer;
                position: absolute;
                right: 50px;
                top: 25px;
                z-index: 10000001;
            }

            /* 重置样式 */
            .el-carousel{
                width: 100%;
                height: 90%;
                top: 5%;
                .el-carousel__container {
                    width: 100%;
                    height: 100%;

                    .el-carousel__arrow {
                        font-size: 35px;
                        width: 50px;
                        height: 50px;
                    }
                    .el-carousel__item {
                        text-align: center;
                    }
                }
            }
        }
    }
</style>
